<template>
	<view>
		
		<block v-if="loading">
			<empty :loading="true"></empty>
		</block>
		<block v-else>
			
			<staffAuth>
				<arrowNav :url="`/pages/quipment/quipmentSave?id=${params.id}`">
					<view class="plr15 ptb10 flex left">
						<text class="pr5 fz16 sIcon-addCircle bold main"></text>
						<view>
							新增设备
						</view>
					</view>
				</arrowNav>
			</staffAuth>
			
			<scroll-view v-if="factorList.length > 0" class="bt whiteBg" scroll-x="true" :scroll-into-view="`s${factorIndex}`" :show-scrollbar="false" :scroll-with-animation="true" style="white-space: nowrap;word-break: keep-all;">
				<view class="plr10 ptb10 inline text-center" style="width: 14.2857%;" :id="`s${index}`" @tap="chooseFactor(index)" :class="{'main current' : index == factorIndex}" v-for="( item , index) in factorList" :key="index">
					{{item}}
				</view>
			</scroll-view>
			
			<view class="mt10">
				<view class=" whiteBg  mb10 " v-for="( item , index) in page.list" :key="index">
					
					<view class="pd pb10 father " :class="{'pt30':role == 2}">
						
						<staffAuth>
							<view class="abs top right">
								<view class="flex rt" @tap="remove(item,index)">
									<view class="sIcon-close pr10 pt5"></view>
								</view>
							</view>
						</staffAuth>
						
						<view class="flex">
							<view>
								<text class="grey mr5">设备监测因子</text>
							</view>
							<view>
								{{item.factor}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">设备名称</text>
							</view>
							<view>
								{{item.name}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">设备型号</text>
							</view>
							<view>
								{{item.model}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">生产商</text>
							</view>
							<view>
								{{item.manufacture}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">设备出厂编号</text>
							</view>
							<view>
								{{item.factoryNum}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">环保产品认证编号</text>
							</view>
							<view>
								{{item.certificationNo}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">测试方法</text>
							</view>
							<view>
								{{item.testMethod}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">检出限</text>
							</view>
							<view>
								{{item.detectionLimit}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">分析周期</text>
							</view>
							<view>
								{{item.analysisCycle}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">量程F.S.</text>
							</view>
							<view>
								{{item.range}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">主要试剂1及浓度</text>
							</view>
							<view>
								{{item.reagent1}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">主要试剂2及浓度</text>
							</view>
							<view>
								{{item.reagent2}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">主要试剂3及浓度</text>
							</view>
							<view>
								{{item.reagent3}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">标准曲线参数</text>
							</view>
							<view>
								{{item.standardCurve}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">验收时间</text>
							</view>
							<view>
								{{item.acceptanceTime}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">验收监测单位</text>
							</view>
							<view>
								{{item.acceptanceCompany}}
							</view>
						</view>
						<view class="flex pt5">
							<view>
								<text class="grey mr5">联网时间</text>
							</view>
							<view>
								{{item.networkingTime}}
							</view>
						</view>
						
					</view>
					
					<view class="pd ptb10  bt dashed">
						
						<view class="flex">
							<view>
								<text class="grey mr5">运维公司</text>
							</view>
							<view>
								{{item.servicerName}}
							</view>
						</view>
						
						<view class="flex pt5">
							<view>
								<text class="grey mr5">记录人</text>
							</view>
							<view>
								{{item.recorder}}
							</view>
						</view>
					</view>
					
				</view>
			</view>

			<empty :loading="false" :list="page.list"></empty>

		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params : {id:""}, 
				page : {
					list : [] ,
					lastPage : false ,
					pageNumber : 1 ,
					pageSize : 10
				},
				loading : true ,
				refresh : false ,
				role : -1 ,
				// factorList:["全部","COD","PH","氨氮","总磷","总氮","流量"],
				factorList : [] ,
				factorIndex:0,
			}
		},
		
		onLoad(p) {
			this.params = p ;
			this.role = uni.getStorageSync("role");
		},
		
		onShow() {
			this.page.pageNumber = 1 ;
			this.loadData();
		},
		
		onReachBottom() {
			if (this.page.lastPage) {
				return ;
			}
			this.page.pageNumber ++ ;
			this.loadData();
		},
		
		onPullDownRefresh() {
			if (this.refresh) {
				return ;
			}
			uni.startPullDownRefresh({});
			this.refresh = true ;
			this.page.pageNumber = 1 ;
			this.loadData();
		},
		
		methods: {
			
			chooseFactor:function(e){
				this.factorIndex = e ;
				this.page.pageNumber = 1 ;
				this.loadData();
			},
			
			remove:function(e,index){
				var data = {id:e.stationId , mId : e.id } ;
				uni.showModal({
					title:'提示',
					content:'确认删除该检测因子吗？',
					confirmColor:'#3385ff',
					success : (res)=>{
						if (res.confirm) {
							this.kit.get("/api/quipment/delete",data,res => {
								this.page.list.splice(index,1);
							});
						}
					}
				});
				
			},
			
			loadData:function(e){
				var data = {
					pageNumber : this.page.pageNumber ,
					pageSize : this.page.pageSize ,
					"stationId" : this.params.id ,
					"tq.factor" : this.factorList.length > 0 ? this.factorList[this.factorIndex] : "" 
				} ;
				this.kit.get("/api/quipment/list",data,res => {
					if (res.page.pageNumber > 1) {
						res.page.list = this.page.list.concat(res.page.list);
					}
					this.factorList = res.options || [] ;
					this.page = res.page ;
					this.loading = false ;
					this.refresh = false ;
				});
			},
			
		}
	}
</script>
<style lang="scss">
	.current{
		position: relative;
		&:after{
			content:"";
			display: block;
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 40upx;
			margin-left: -20upx;
			height: 6upx;
			background-color: $main;
			-webkit-border-radius: 12upx;
			-moz-border-radius: 12upx;
			border-radius: 12upx;
			animation:toBig 0.4s ;
		}
	}
	
	@keyframes toBig{
		from{
			transform: scale(0);
		}
		to{
			transform:scale(1);
		}
	}
</style>